<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>marker</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<!--加载样式表-->
		<link rel="stylesheet" href="demo-center.css"/>
		<!--加载地图js-->
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=80dcce144694739ec6f22a2e9d0bfb0f"></script>
	</head>
	<body>
		
		
		<div class="mapBox">
			<!--地图容器-->
			<div id="container"></div>
			<div class="info">
			    点击地图上的点标记，打开所添加的自定义信息窗体
			</div>
		</div>
		
		
		<script>
		//地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
		var map = new AMap.Map("container", {
		    resizeEnable: true, //随地图缩放
		    center: [116.481181, 39.989792],//中心点
		    zoom: 16 //缩放级别
		});
		addMarker();
		
		//添加marker标记
		function addMarker() {
		    map.clearMap();//把整个map清空
			//创建marker点
		    var marker = new AMap.Marker({
		        map: map,
		        position: [116.481181, 39.989792]
		    });
		    //鼠标点击marker弹出自定义的信息窗体
		    AMap.event.addListener(marker, 'click', function () {
		        infoWindow.open(map, marker.getPosition());
		    });
		}
		
		//实例化信息窗体
		var title = '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
		content = [];
		content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
		content.push("电话：010-64733333");
		content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");
		var infoWindow = new AMap.InfoWindow({
		    isCustom: true,  //使用自定义窗体
		    content: createInfoWindow(title, content.join("<br/>")),
		    offset: new AMap.Pixel(16, -45)
		});
		
		//构建自定义信息窗体
		function createInfoWindow(title, content) {
		    var info = document.createElement("div");
		    info.className = "custom-info input-card content-window-card";
		
		    //可以通过下面的方式修改自定义窗体的宽高
		    //info.style.width = "400px";
		    // 定义顶部标题
		    var top = document.createElement("div");
		    var titleD = document.createElement("div");
		    var closeX = document.createElement("img");
		    top.className = "info-top";
		    titleD.innerHTML = title;
		    closeX.src = "https://webapi.amap.com/images/close2.gif";
		    closeX.onclick = closeInfoWindow;
		
		    top.appendChild(titleD);
		    top.appendChild(closeX);
		    info.appendChild(top);
		
		    // 定义中部内容
		    var middle = document.createElement("div");
		    middle.className = "info-middle";
		    middle.style.backgroundColor = 'white';
		    middle.innerHTML = content;
		    info.appendChild(middle);
		
		    // 定义底部内容
		    var bottom = document.createElement("div");
		    bottom.className = "info-bottom";
		    bottom.style.position = 'relative';
		    bottom.style.top = '0px';
		    bottom.style.margin = '0 auto';
		    var sharp = document.createElement("img");
		    sharp.src = "https://webapi.amap.com/images/sharp.png";
		    bottom.appendChild(sharp);
		    info.appendChild(bottom);
		    return info;
		}
		
		//关闭信息窗体
		function closeInfoWindow() {
		    map.clearInfoWindow();
		}
		
		
		</script>
		<style>
			.mapBox {
				width: 800px;
				height: 600px;
				position: relative;
			}
			html, body, #container {
				height: 100%;
				width: 100%;
			}
			.content-window-card {
				position: relative;
				box-shadow: none;
				bottom: 0;
				left: 0;
				width: auto;
				padding: 0;
			}
	
			.content-window-card p {
				height: 2rem;
			}
	
			.custom-info {
				border: solid 1px silver;
			}
	
			div.info-top {
				position: relative;
				background: none repeat scroll 0 0 #F9F9F9;
				border-bottom: 1px solid #CCC;
				border-radius: 5px 5px 0 0;
			}
	
			div.info-top div {
				display: inline-block;
				color: #333333;
				font-size: 14px;
				font-weight: bold;
				line-height: 31px;
				padding: 0 10px;
			}
	
			div.info-top img {
				position: absolute;
				top: 10px;
				right: 10px;
				transition-duration: 0.25s;
			}
	
			div.info-top img:hover {
				box-shadow: 0px 0px 5px #000;
			}
	
			div.info-middle {
				font-size: 12px;
				padding: 10px 6px;
				line-height: 20px;
			}
	
			div.info-bottom {
				height: 0px;
				width: 100%;
				clear: both;
				text-align: center;
			}
	
			div.info-bottom img {
				position: relative;
				z-index: 104;
			}
	
			span {
				margin-left: 5px;
				font-size: 11px;
			}
	
			.info-middle img {
				float: left;
				margin-right: 6px;
			}
		</style>
	</body>
</html>
